<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4609712_696y8mu3zym.css">
</head>
<style>
    #app {
        width: 820px;
        height: 430px;
        background-color: aqua;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        position: relative;
    }

    .box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .lf {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-left: 35px;

        &.sm {
            text-align: center;
            margin: 20px;
        }
    }

    .ewm {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ewm .img1 {
        width: 300px;
        position: absolute;
        top: 40px;
        left: -50px;
    }

    .rl {
        display: flex;
    }

    .sr {
        width: 400px;
        height: 90px;
        border: 1px solid gainsboro;
        border-radius: 20px;
    }

    .sr .zh {
        width: 398px;
        height: 44px;
    }

    .sr .password {
        width: 398px;
        height: 44px;
    }

    .zy {
        width: 160px;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .by {
        width: 160px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
</style>

<body>
    <div id="app">
        <div class="box">
            <div class="lf">
                <div class="sm">扫描二维码登录</div>
                <div class="ewm" @mouseover="img=2" @mouseout="img=1">
                    <img v-show="img===2" class="img1" src="./img/erm2.png" alt="">
                    <img v-show="img===1" src="./img/ewm.png" alt="">
                    <img v-show="img===3" src="./img/ewm3.png" alt="" style="width: 160px; height: 160px;">
                </div>
                <p>请使用<a href="https://app.bilibili.com/" @mouseover="img=3" @mouseout="img=1"
                        style="text-decoration: none; color: blue;">哔哩哔哩客户端</a></p>
                <p>扫码登录或扫码下载APP</p>
            </div>
        </div>
        <div class="rl">
            <div id="app1">
                <span @click="qh=1">密码登录</span>
                <span @click="qh=2">短信登录</span>
                <div class="sr" v-show="qh===1">
                    <div class="zh"><span>账号</span><input
                            style="width: 320px; border: none; background-color:rgba(255, 255, 255, 0) ; outline: none;"
                            type="text" placeholder="请输入账号"></div>
                    <div class="mm"><span>密码</span><input @focus="yc=1" @blur="yc=2"
                            style="width: 185px; border: none; background-color: rgba(255, 255, 255, 0);outline: none;"
                            :type="displayThePassword?'text':'password'" placeholder="请输入密码"></div>
                    <span class="wj" @click="wj=!wj">忘记密码？</span>
                    <div class="wjmm"><span v-show="wj" v-for="(v,k) in wg">{{v.name}}</span>
                        <span v-show="wj" v-for="(v,k) in wg">{{v.name}}</span>
                    </div>
                    <img class="zy" src="./img/left2.png" v-show="yc===1" alt="">
                    <img class="zy" src="./img/left1.png" v-show="yc===2" alt="">
                    <img class="by" src="./img/right2.png" v-show="yc===1" alt="">
                    <img class="by" src="./img/right1.png" v-show="yc===2" alt="">
                    <div class="an" v-show="qh===1">
                        <a @click="qh=2">
                            <div class="zhuce"><span>注册</span></div>
                        </a>
                        <a>
                            <div class="denglu"><span>登录</span></div>
                        </a>
                    </div>
                </div>
                <div class="sr" v-show="qh===2">
                    <div class="zh1"><span @click="selectOpen=!selectOpen">{{sjh[moren].hao}}</span><input
                            style="width: 255px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;"
                            type="text" placeholder="请输入手机号">
                        <div>
                            <button style="background-color: rgba(255, 255, 255, 0);border: none;">获取验证码</button>
                        </div>
                        <div class="aa">
                            <p v-show="selectOpen" @click="moren=index,selectOpen=false" v-for="(item,index) in sjh">
                                {{item.name}}{{item.hao}}</p>
                        </div>
                    </div>
                    <div class="mm"><span>验证码</span><input @focus="yc=1" @blur="yc=2"
                            style="width: 320px; border: none; background-color: rgba(255, 255, 255, 0); outline: none;"
                            :type="displayThePassword?'text':'password'" placeholder="请输入验证码"></div>
                    <img class="zy" src="./img/left2.png" v-show="yc===1" alt="">
                    <img class="zy" src="./img/left1.png" v-show="yc===2" alt="">
                    <img class="by" src="./img/right2.png" v-show="yc===1" alt="">
                    <img class="by" src="./img/right1.png" v-show="yc===2" alt="">
                </div>
                <div class="an1" v-show="qh===2">
                    <a href="">
                        <div class="denglu"><span>登录/注册</span></div>
                    </a>
                </div>
                <div style="margin-top: 50px; text-align: center;">
                    <p>其他登录方式</p>
                </div>
                <div class="qt" style="margin-top: 30px; display: flex; justify-content: space-between;">
                    <div class="wx"><a style="text-decoration: none; color: green;"
                            href="https://open.weixin.qq.com/connect/qrconnect?appid=wxafc256bf83583323&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D5df54ca9712c2c45bb13298e215ac71a%26sns_platform%3Dwechat%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&response_type=code&scope=snsapi_login&state=authorize#wechat_redirect"><span
                                class="iconfont icon-wechat" style="font-size: 30px;"></span> <span style="color: black;">微信登录</span></a>
                    </div>
                    <div class="wb"><a style="text-decoration: none; color: orangered;"
                            href="https://api.weibo.com/oauth2/authorize?client_id=2841902482&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D90e19eefefc92860a65ca23b1addedd4%26sns_platform%3Dweibo%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=email###"><span
                                class="iconfont icon-weibotubiao2" style="font-size: 30px;"></span> <span style="color: black;">微博登录</span></a>
                    </div>
                    <div class="QQ"><a style="text-decoration: none; color: blue;"
                            href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&state=authorize&client_id=101135748&redirect_uri=https%3A%2F%2Fpassport.bilibili.com%2Fpc%2Fpassport%2FsnsLogin%3Fcsrf_state%3D69e9007886fc58d7260c2abb4c12dcc3%26sns_platform%3Dqq%26source%3Dmain-fe-header%26go_url%3Dhttps%253A%252F%252Fwww.bilibili.com%252F&scope=do_like,get_user_info,get_simple_userinfo,get_vip_info,get_vip_rich_info,add_one_blog,list_album,upload_pic,add_album,list_photo,get_info,add_t,del_t,add_pic_t,get_repost_list,get_other_info,get_fanslist,get_idollist,add_idol,del_idol,get_tenpay_addr"><span
                                class="iconfont icon-QQtubiao" style="font-size: 30px;"></span> <span style="color: black;">QQ登录</span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <p> 未注册过哔哩哔哩的手机号，我们将自动帮你注册账号 </p>
            <p> 登录或完成注册即代表你同意
                <span>用户协议 <span>和</span></span>
                <span>隐私政策</span>
            </p>
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const { createApp, ref } = Vue;
    createApp({
        setup() {
            let displayThePassword = ref(false)
            let img = ref(1)
            let qh = ref(1)
            let yc = ref(2)
            let wj = ref(false)
            let selectOpen = ref(false)
            let moren = ref(0)
            let wg = ref([{
                name: '发送短信快速登录',
                Name: '去找回密码'
            }, {
                name: '未注册或绑定哔哩哔哩的手机号,将帮你注册新账号',
                Name: '通过绑定的手机号邮箱重置密码'
            }])
            let sjh = ref([{
                name: '中国内陆',
                hao: '+86'
            }, {
                name: '中国香港特别行政区',
                hao: '+852'
            }, {
                name: '中国澳门特别行政区',
                hao: '+853'
            }, {
                name: '中国台湾',
                hao: '+886'
            }, {
                name: '美国',
                hao: '+1'
            }, {
                name: '比利时',
                hao: '+32'
            }])
            return {
                displayThePassword,
                img,
                qh,
                yc,
                wj,
                selectOpen,
                moren,
                wg,
                sjh
            }
        }
    }).mount('#app')
</script>

</html>